<template>
  <div class="fatherBox">
    <el-card>
      <el-steps style="width:90%;margin-left:5%;margin-top:1%" :active="active" finish-status="success">
        <el-step title="查询被投靠人" />
        <el-step title="确认被投靠人" />
        <el-step title="查询投靠人" />
        <el-step title="确认投靠人" />
        <el-step title="确认迁入" />
        <el-step title="迁入完成" />
      </el-steps>
      <div class="tableBox">
        <!-- 查询被投靠人 -->
        <el-form style="width:80%;margin-left:20%;margin-top:15%" 
        ref="rulePopulationRef" :model="population" :rules="rules" v-show="active==0">
          <el-form-item label="被投靠人身份证号：" prop="idNumber">
            <el-col :span="12">
              <el-input v-model="population.idNumber"/>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="2"><el-button type="primary" @click="inquireClick">查询</el-button></el-col>
            <el-col :span="9"></el-col>
          </el-form-item>
        </el-form>
        <!-- 确认被投靠人 -->
        <div align="center" style="font-size:medium; margin-top: 13%;" v-show="active==1">被投靠人信息</div>
        <el-table :data="populationTableData" border style="margin-top: 10px; margin-left: 10%;width: 80%;"
         :row-style="{height:'5vh!important'}" v-show="active==1">
          <el-table-column prop="name" label="姓名"/>
          <el-table-column prop="gender" label="性别"/>
          <el-table-column prop="birthDate" label="出生日期"/>
          <el-table-column prop="householdNumber" label="户号"/>
          <el-table-column prop="maritalStatus" label="婚姻状况"/>
          <el-table-column prop="educationLevel" label="教育程度"/>
        </el-table>
        <!-- 查询投靠人 -->
        <el-form style="width:80%;margin-left:20%;margin-top:15%" 
        ref="ruleChildrenRef" :model="children" :rules="rules" v-show="active==2">
          <el-form-item label="投靠人身份证号：" prop="idNumber">
            <el-col :span="12">
              <el-input v-model="children.idNumber"/>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="2"><el-button type="primary" @click="inquireChildrenClick">查询</el-button></el-col>
            <el-col :span="9"></el-col>
          </el-form-item>
        </el-form>
        <!-- 确认投靠人 -->
        <div align="center" style="font-size:medium; margin-top: 13%;" v-show="active==3">投靠人信息</div>
        <el-table :data="childrenTableData" border style="margin-top: 10px; margin-left: 10%;width: 80%;"
         :row-style="{height:'5vh!important'}" v-show="active==3">
          <el-table-column prop="name" label="姓名"/>
          <el-table-column prop="gender" label="性别"/>
          <el-table-column prop="birthDate" label="出生日期"/>
          <el-table-column prop="maritalStatus" label="婚姻状况"/>
          <el-table-column prop="educationLevel" label="教育程度"/>
        </el-table>
        <el-row style="margin-top:5%" align="middle" justify="center" v-show="active==3">
          <text>变动原由：</text>
          <el-input style="width:50%;" v-model="change.description"/>
        </el-row>
        <!-- 确认迁入 -->
        <div align="center" style="font-size:medium; margin-top: 5%;" v-show="active==4">户口迁入表</div>
        <el-table  :data="changeTableData" border v-show="active==4"
        style="margin-top: 10px; margin-left: 10%;width: 80%;" 
        :row-style="{height:'5vh!important'}">
          <el-table-column prop="householdMember" label="投靠人姓名"/>
          <el-table-column prop="householdHead" label="被投靠人姓名"/>
          <el-table-column prop="changeType" label="变动类型"/>
          <el-table-column prop="changeDate" label="变动日期"/>
          <el-table-column prop="description" label="变动原由"/>
          <el-table-column prop="handlingPoliceStation" label="办理派出所"/>      
        </el-table>
        <!-- 迁入完成 -->
        <el-result
        icon="success"
        title="户口迁入成功"
        sub-title="------您已完成户口迁入------"
        v-show="active==6"
        >
          <template #extra>
            <el-button type="primary" @click="back">确认</el-button>
          </template>
        </el-result>
        <!-- 变动步骤按钮 -->
        <el-row style="margin-top:15%" align="middle" justify="space-evenly"
         v-show="active==1||active==2||active==3||active==4">
          <el-button type="primary" @click="activeAdd" v-show="active==1||active==3||active==4||active==5">确认</el-button>
          <el-button type="primary" @click="activeCut">返回上一步</el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive} from "vue";
import { inquire } from "@/api/population_change/changeIn/inquire.js";
import { populationUpdate } from  "@/api/population_change/changeIn/populationUpdate.js";
import { populationChangeAdd } from "@/api/population_change/changeIn/populationChangeAdd.js"
import{ dateChange } from "@/core/dateChange.js"
import {useRouter} from 'vue-router'

//步骤条当前步骤变量
const active = ref(0)
//步骤条变动函数
const activeAdd = async () => {
  await active.value++
  if(active.value==4){
    //生成户口迁入表数据
    //数据迁移
    Object.assign(changeTable,change)
    //日期信息格式转换
    change.changeDate=await dateChange(change.changeDate)
    changeTable.changeDate=await dateChange(changeTable.changeDate)
    //信息填充
    changeTable.householdHead=population.name
    changeTable.householdMember=children.name
    if(change.description==''){
      change.description='子女投靠'
      changeTable.description='子女投靠'
    }else{
      changeTable.description=change.description
    }
  }else if(active.value==5){
    //执行迁入
    if(children.idNumber!=population.idNumber){
      //更新children户号信息
      children.householdNumber=population.householdNumber
      if(population.relation_to_head=="户主"){
        children.relationToHead="子女"
      }else{
        children.relationToHead="其他"
      }
      await populationUpdate(children)
      //生成populationChange数据
      change.personId=children.personId
      change.newHouseholdNumber=population.householdNumber
      await populationChangeAdd(change)
      //迁入反馈
      await ElMessage.success("户口迁入成功")
      active.value++
    }
    }
}
const activeCut = () => {
  if (active.value-- < 1) active.value = 0
}

//表单引用
const rulePopulationRef= ref()
const ruleChildrenRef= ref()
//表单验证规则
const rules = {
  idNumber: [
    { required: true, message: '请输入被投靠人身份证号', trigger: 'blur' },
    { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  // 其他字段的验证规则
};

//被投靠人的数据
const population = reactive({
  name:'',
  gender:'',
  birthDate:'',
  idNumber:'',
  householdNumber:'',
  maritalStatus:'',
  educationLevel:'',
  currentAddress:'',
  relation_to_head:'',
});

//被投靠人表格内容
const populationTableData=[population,]

//查询按钮（查询被投靠人信息）
const inquireClick= async () =>{
  //触发表单验证
  const isValid = await rulePopulationRef.value.validate();
  //验证通过
  if(isValid){
    //向后端发送请求，错误响应将被响应拦截器拦截，通过的响应在这里被转成表格数据
    var jsonObj=(await inquire(population)).data  
    await ElMessage.success("查询完成")
    //对后端传过来的日期信息进行转换
    jsonObj.birthDate=await dateChange(jsonObj.birthDate)
    //数据展示
    Object.assign(population,jsonObj)
    //步骤变动
    await activeAdd()
  }
}

//投靠人信息（出生申报，同时生成个人数据）
const children = reactive({
  name:'',
  gender:'',
  birthDate:'',
  idNumber:'',
  householdNumber:'',
  relationToHead:'',
  maritalStatus:'',
  educationLevel:'',
  occupation:'',
  phoneNumber:'',
});

//投靠人表格内容
const childrenTableData=[children,]

//查询按钮（查询投靠人信息）
const inquireChildrenClick= async () =>{
  //不允许投靠人和被投靠人是同一人
  if(children.idNumber!=population.idNumber){
    //触发表单验证
    const isValid = await ruleChildrenRef.value.validate();
    //验证通过
    if(isValid){
    //向后端发送请求，错误响应将被响应拦截器拦截，通过的响应在这里被转成表格数据
    var jsonObj=(await inquire(children)).data  
    await ElMessage.success("查询完成")
    //对后端传过来的日期信息进行转换
    jsonObj.birthDate=await dateChange(jsonObj.birthDate)
    //数据展示
    Object.assign(children,jsonObj)
    //步骤变动
    await activeAdd()
    }
  }else{
    await ElMessage.error("投靠人和被投靠人身份证号重合！！！")
  }
}

import { useStore } from 'vuex';

const store = useStore();
const userName = store.getters.userName;
const officerInfo= store.getters.officerInfo;

//传入后端的变动表信息
const change = reactive({
  personId:'',
  changeType:'子女投靠父母',
  changeDate:new Date(),
  description:'',
  handlingPoliceStationId:officerInfo.policeStation.stationId,
  newHouseholdNumber:'',
})

//前端显示的户口迁入表信息
const changeTable = reactive({
  changeType:'子女投靠',
  changeDate:new Date(),
  description:'',  
  handlingPoliceStation:officerInfo.policeStation.name,
  householdHead:'',
  householdMember:'',
})

//户口迁入表内容
const changeTableData=[changeTable,]

//迁入成功后退出按钮
const router=useRouter()
const back= async () =>{
  //转界面
  router.push({path:"/refresh"})
}
</script>

<style>
.fatherBox{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.el-card {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  /* 可以根据需要调整这个值 */
}

.tableBox{
  margin-top: 10%;
  width: 100%;
}
</style>